<template>
	<view class="index" :style="'background: url('+ homebgc +') no-repeat center/cover'">
		<view class="top"></view>
		<view class="title" v-if="title!='我的'">
			<view class="title-top">
				<text class="tn-icon-home-capsule-fill"
					style="font-size: 30rpx;color: #8C80F8;margin-right: 8rpx;"></text>
				<view class="name">舞界AI</view>
			</view>
			<view class="title-name">{{title}}</view>
		</view>
		<view class="user" v-else>
			<view class="info">
				<image class="picture" :src="websiteUrl + UserInfo.avatar" mode=""></image>
				<view class="user_name">{{UserInfo.name}}</view>
			</view>
			<view class="setUp" @click="setting">
				<text class="tn-icon-set-fill"></text>
			</view>
		</view>
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<Basic ref="basic"></Basic>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<components ref="components" :actinList="actinList"></components>
			</scroll-view>
		</view>
		<!-- <view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
      <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
        <vip ref="vip"></vip>
      </scroll-view>
    </view> -->
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<templatePage ref="template"></templatePage>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<user ref="about"></user>
			</scroll-view>
		</view>
		<!-- <view  v-if="title!='我的'&&title!='基本功'" class="photograph" @click="photograph">
			<text class="tn-icon-camera" style="font-size: 42rpx;"></text>
		</view> -->
		<view class="tabbar">
			<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
				:animation="true" :safeAreaInsetBottom="true" @change="switchTabbar"></tn-tabbar>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import Basic from '../basic/basic.vue'
	import Components from '../components/components.vue'
	import TemplatePage from '../template/template.vue'
	// import Vip from '../vip/vip.vue'
	import user from '../user/user.vue'
	import home from '@/static/tabs/ico_tabbar_home.png'
	import home_active from '@/static/tabs/ico_tabbar_home@2x.png'
	import jbg from '@/static/tabs/ico_tabbar_jbg.png'
	import jbg_active from '@/static/tabs/ico_tabbar_jbg@2x.png'
	import kj from '@/static/tabs/ico_tabbar_kj.png'
	import kj_active from '@/static/tabs/ico_tabbar_kj@2x.png'
	import wd from '@/static/tabs/ico_tabbar_wd.png'
	import wd_active from '@/static/tabs/ico_tabbar_wd@2x.png'

	export default {
		components: {
			Basic,
			Components,
			TemplatePage,
			// Vip,
			user
		},
		data() {
			return {
				// 底部tabbar菜单数据
				homebgc: this.$websiteUrl + 'static/web_files/Home_bj.svg',
				websiteUrl: this.$websiteUrl,
				tabbarList: [{
						title: '首页',
						activeIcon: home_active,
						inactiveIcon: home
					},
					{
						title: '基本功',
						activeIcon: jbg_active,
						inactiveIcon: jbg
					},
					// {
					//   title: '会员',
					//   activeIcon: 'vip-fill',
					//   inactiveIcon: 'vip',
					//   activeIconColor: '#FFFFFF',
					//   inactiveIconColor: '#FFFFFF',
					//   iconSize: 50,
					//   out: true
					// },
					{
						title: '考级',
						activeIcon: kj_active,
						inactiveIcon: kj,
					},
					{
						title: '我的',
						activeIcon: wd_active,
						inactiveIcon: wd,
					}
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: [],
				actinList: {},
				UserInfo: {},
				title:''
			}
		},
		onLoad(options) {
			if (uni.getStorageSync('token') && uni.getStorageSync('userInfo')) {
				const userdata = uni.getStorageSync('userInfo')
				this.UserInfo = userdata
				let index
				index = Number(options.index || 0)
				if (options.action) {
					const actin = JSON.parse(decodeURIComponent(options.action));
					this.actinList = actin
					index = actin.index
				} else if (options.userInfo) {
					const userInfo = JSON.parse(decodeURIComponent(options.userInfo));
					// console.log(userInfo);
					index = userInfo.index
				}

				// 根据底部tabbar菜单列表设置对应页面的加载情况
				this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
					return index === tabbar_index
				})
				this.switchTabbar(index)
			} else {
				this.logout();
				uni.reLaunch({
					url: '/basicPage/login/index'
				});
			}
			// 	let index
			// 	 index = Number(options.index || 0)
			// 	if (options.action) {
			// 	      const actin = JSON.parse(decodeURIComponent(options.action));
			// 		  this.actinList = actin
			// 	      index = actin.index
			// 	    }
			// 			// 根据底部tabbar菜单列表设置对应页面的加载情况
			// 			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
			// 				return index === tabbar_index
			// 			})
			// 			this.switchTabbar(index)

		},
		computed: {
			userInfo() {
				return this.$store.getters.getUserInfo
			}
		},
		methods: {
			...mapMutations(['login', 'logout']),
			// 切换导航
			switchTabbar(index) {
				switch (index) {
					case 0:
						this.title = 'HI,' + this.UserInfo.name
						break;
					case 1:
						this.title = '基本功'
						break;
					case 2:
						this.title = '考级'
						break;
					case 3:
						this.title = '我的'
						break;
				}
				this._switchTabbarPage(index)
			},


			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			},
			photograph() {
				console.log('点击加号是什么意思');
			},
			setting() {
				wx.navigateTo({
					url: '/basicPage/userInfo/index'
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		height: 100vh;

		.top {
			height: 176rpx;
		}

		.title {
			padding: 0 48rpx;

			.title-top {
				display: flex;
				align-items: center;

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				.name {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 32rpx;
					color: #7265E3;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;

				}
			}

			.title-name {
				width: 70%;
				height: 88rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 64rpx;
				color: #2D3142;
				line-height: 88rpx;
				text-align: left;
				font-style: normal;
				white-space: nowrap;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				-o-text-overflow: ellipsis;
			}
		}

		.user {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 96rpx;
			padding-left: 40rpx;
			padding-right: 40rpx;

			.info {
				display: flex;
				align-items: center;
			}

			.setUp {
				font-size: 40rpx;
				color: #7265E3;
			}

			.picture {
				width: 96rpx;
				height: 96rpx;
				margin-right: 20rpx;
				// background: #AB9359;
				border-radius: 84rpx;
				border: 8rpx solid #FFFFFF;
			}

			.user_name {
				font-weight: 400;
				font-size: 40rpx;
				color: #333333;
			}
		}

		.photograph {
			display: flex;
			justify-content: center;
			align-items: center;
			position: fixed;
			right: 40rpx;
			bottom: 15%;
			z-index: 999;
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			background: #7265E3;
			color: #fff;
			box-shadow: 0rpx 10rpx 30rpx 0rpx rgba(114, 101, 227, 0.5);
		}
	}

	.tabbar {
		height: 100px;
	}

	.custom-tabbar-page {
		height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));

	}

	::v-deep .tn-tabbar__content__item {
		&:nth-child(1) {
			border-radius: 20px 0 0 0;
		}

		&:nth-child(4) {
			border-radius: 0 20px 0 0;
		}
	}

	::v-deep .tn-tabbar__content {
		border-radius: 20px 20px 0 0;
	}
</style>